import React from 'react';
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
import am4themes_animated from '@amcharts/amcharts4/themes/animated'
import Logo from '../../svg/1.svg'
import { Button } from '@material-ui/core';

export default class LineAmcharts extends React.Component {
  firstTime = this.generateChartData()[0].date.getTime();
  lastTime = this.generateChartData()[this.generateChartData().length - 1].date.getTime();
  date = new Date(this.firstTime + (this.lastTime - this.firstTime) / 2);


  generateChartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 200);
    var visits = 10;
    for (var i = 0; i < 200; i++) {
      // we create date objects here. In your data, you can have date strings
      // and then set format of your dates using chart.dataDateFormat property,
      // however when possible, use date objects, as this will speed up chart rendering.
      var newDate = new Date(firstDate);
      newDate.setDate(newDate.getDate() + i);

      visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);

      chartData.push({
        date: newDate,
        visits: visits
      });
    }
    return chartData;
  }
  changeData = () => {
    console.log(this.chart)
    this.chart.data = this.generateChartData()
    this.generateRange()
  }
  generateRange = () => {
    let chart = this.chart
    let dateAxis = this.dateAxis
    if (!this.seriesRange) {
      this.seriesRange = dateAxis.createSeriesRange(this.series);
    }

    let seriesRange = this.seriesRange
    // seriesRange.contents.strokeDasharray = "2,3";
    seriesRange.contents.stroke = am4core.color('gray');
    seriesRange.contents.strokeWidth = 0;
    seriesRange.contents.fillOpacity = 0.3;

    // var fillModifier = new am4core.LinearGradientModifier();
    // fillModifier.opacities = [1, 0];
    // fillModifier.offsets = [0, 1];
    // fillModifier.gradient.rotation += 180;
    // // console.log('seriesRange', seriesRange)
    // seriesRange.contents.fillModifier = fillModifier
    // lineSeries.segments.template.fillModifier = fillModifier;

    // var pattern = new am4core.LinePattern();
    // pattern.stroke = seriesRange.contents.stroke;
    // pattern.width = 1000;
    // pattern.height = 1000;
    // pattern.gap = 0.000001;
    let gradient = new am4core.LinearGradient();
    gradient.addColor('#767676')
    gradient.addColor('white')
    gradient.rotation += 90
    seriesRange.fill = gradient
    // seriesRange.contents.fill = gradient;

    // add range


    var range = dateAxis.axisRanges.push(new am4charts.DateAxisDataItem());
    range.grid.strokeOpacity = 0;
    range.bullet = new am4core.Image();
    range.bullet.href = Logo
    range.bullet.width = 40
    range.bullet.height = 40
    range.bullet.dy = -15
    let white = am4core.color('white')
    range.grid.fill = white
    range.bullet.minX = 0;
    // range.bullet.adapter.add("minY", function (minY, target) {
    //   target.maxY = chart.plotContainer.maxHeight;
    //   target.maxX = chart.plotContainer.maxWidth;
    //   return chart.plotContainer.maxHeight;
    // })
    console.log('ticks', dateAxis.renderer.ticks)
    console.log(range, range.bullet)
    // range.bullet.background.fill = am4core.color("#fff");
    // Applied on hover
    // range.bullet.background.states.getKey("hover").properties.fill = am4core.color("#fff");
    // range.bullet.background.states.getKey("hover").properties.fill = am4core.color("#fff");
    // range.bullet.background.states.getKey("hover").properties.fill = am4core.color("#fff");
    // range.bullet.background.states.getKey("down").properties.fill = am4core.color("#fff");
    // range.bullet.background.states.getKey("down").properties.fill = am4core.color("#fff");
    // range.bullet.background.states.getKey("down").properties.fill = am4core.color("#fff");
    // range.bullet.icon.stroke = am4core.color("#8A5658");
    range.bullet.events.on("hit", function () {
      range.value = dateAxis.xToValue(range.bullet.pixelX - 100);
    })
    range.date = this.date;

  }

  componentDidMount() {

    // Create chart instance
    var chart = am4core.create("grayarea", am4charts.XYChart);
    this.chart = chart
    // Add data
    chart.data = this.generateChartData();

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.ticks.template.disabled = false;
    dateAxis.renderer.ticks.template.strokeOpacty = 0.5;
    dateAxis.renderer.labels.template.dy = 5
    dateAxis.renderer.ticks.template.dx = 3
    this.dateAxis = dateAxis
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var lineSeries = chart.series.push(new am4charts.LineSeries());
    this.series = lineSeries
    lineSeries.dataFields.valueY = "visits";
    lineSeries.dataFields.dateX = "date";
    lineSeries.name = "Sales";
    lineSeries.strokeWidth = 0;
    lineSeries.fillOpacity = 0.2;
    lineSeries.fill = am4core.color("#1564B5")


    var fillModifier = new am4core.LinearGradientModifier();
    fillModifier.opacities = [1, 0];
    fillModifier.offsets = [0, 1];
    fillModifier.gradient.rotation += 90;
    lineSeries.segments.template.fillModifier = fillModifier;
    console.log('lineSeries.segments', lineSeries.segments)
    this.generateRange()
    let range = dateAxis.axisRanges.create()
    console.log('range', range)

  }
  render() {
    return (
      <>
        <div id='grayarea'></div>
        <Button onClick={this.changeData}>切换</Button>
      </>
    )
  }
}